<template>
	<view :style="warpCss">

		<view class="px-[30rpx] pt-[30rpx] box-border pb-[30rpx]" :class="{ '!pb-[120rpx]': false }">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view :style="navbarInnerStyle"></view> -->
			<!-- #endif -->
			<view v-if="info" class="flex items-center">
				<!-- 唤起获取微信 -->
				<u-avatar :src="img(info.avatar)" :size="'120rpx'" shape="square" leftIcon="none"
					:default-url="img('static/resource/images/default_headimg.png')" @click="clickAvatar" />
				<view class="ml-[20rpx] flex-1">
					<view class="text-[#ffffff] flex items-baseline flex-wrap" :style="{ color: diyComponent.textColor }">
						<view class="text-[36rpx] truncate max-w-[320rpx] font-bold leading-[38rpx]">{{ info.nickname }}</view>
						<view class="text-[26rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.postIds">
							{{ potsStr }}
						</view>
					</view>
					<!-- <view class="text-[#666] text-[24rpx] font-400 leading-[28rpx] mt-[14rpx]"
						:style="{ color: diyComponent.uidTextColor }">UID：{{ info.id }}</view> -->
					<view class="text-[#666] text-[28rpx] font-400 leading-[28rpx] mt-[14rpx]"
						:style="{ color: diyComponent.uidTextColor }">归属：{{ tenantName }}({{ tenantId }})</view>
				</view>
				<text @click="diyStore.toRedirect(diyComponent.codelink)" v-if="diyComponent.isShowCode"
					class="nc-iconfont nc-icon-erweimaV6xx text-[50rpx] ml-[10rpx]"
					:style="{ color: diyComponent.textColor }"></text>
				<text @click="redirect({ url: '/app/pages/setting/index' })" v-if="diyComponent.isShowSet"
					class="nc-iconfont nc-icon-shezhiV6xx1 text-[50rpx] ml-[20rpx]"
					:style="{ color: diyComponent.textColor }"></text>
			</view>
			<view v-else class="flex items-center">
				<u-avatar :src="img('static/resource/images/default_headimg.png')" :size="'100rpx'" @click="toLogin" />
				<view class="ml-[20rpx] flex-1" @click="toLogin">
					<view class="text-[32rpx] font-500 leading-[38rpx]" :style="{ color: diyComponent.textColor }">
						{{ t('login') }}
					</view>
				</view>
				<view @click="redirect({ url: '/app/pages/setting/index' })">
					<text class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]"
						:style="{ color: diyComponent.textColor }"></text>
				</view>
			</view>
			<view class="flex mt-[40rpx] items-center" v-if="diyComponent.isShowAccount">
				<view class="text-center w-[25%] flex-shrink-0">
					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
						<view :style="{ color: diyComponent.textColor }">{{ fen2yuan(otherPrice)
						}}</view>
					</view>
					<view class="text-[28rpx] font-400">
						<view :style="{ color: diyComponent.textColor }">今日业绩
						</view>
					</view>
				</view>
				<view class="text-center w-[25%] flex-shrink-0">
					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
						<view :style="{ color: diyComponent.textColor }">{{
							fen2yuan(performancePrice) || 0 }}</view>
					</view>
					<view class="text-[28rpx] font-400">
						<view :style="{ color: diyComponent.textColor }">今日消耗
						</view>
					</view>
				</view>
				<view class="text-center w-[25%] flex-shrink-0">
					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
						<view :style="{ color: diyComponent.textColor }">{{
							storeUser || 0 }}</view>
					</view>
					<view class="text-[28rpx] font-400">
						<view :style="{ color: diyComponent.textColor }">今日客流
						</view>
					</view>
				</view>
				<view class="text-center w-[25%] flex-shrink-0">
					<view class="text-[36rpx] mb-[20rpx] font-500 price-font">
						<view :style="{ color: diyComponent.textColor }">{{ serviceNum || 0 }}</view>
					</view>
					<view class="text-[28rpx] font-400">
						<view :style="{ color: diyComponent.textColor }">今日手工</view>
					</view>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<information-filling ref="infoFillRef"></information-filling>
		<!-- #endif -->

		<!-- 强制绑定手机号 -->
		<bind-mobile ref="bindMobileRef" />

	</view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import useMemberStore from '@/stores/member'
import { useLogin } from '@/hooks/useLogin'
import { getUnusedCouponCount } from '@/addon/shop/api/coupon'
import { img, isWeixinBrowser, redirect, urlDeconstruction, moneyFormat, getToken } from '@/utils/common'
import { t } from '@/locale'
import { wechatSync } from '@/app/api/system'
import useDiyStore from '@/app/stores/diy'
import useConfigStore from '@/stores/config'
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
import { getStatisticsRebateEmployee } from '@/app/api/member'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { onShow } from '@dcloudio/uni-app'
import { fen2yuan } from '@/utils/formatting'

const diyGoods = useGoods();
const props = defineProps(['component', 'index', 'pullDownRefreshCount', 'global']);

const configStore = useConfigStore()
const diyStore = useDiyStore();

const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})

const warpCss = computed(() => {
	var style = '';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}
	if (diyComponent.value.bgUrl) {
		style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
		style += 'background-size: 100%;';
		style += 'background-repeat: no-repeat;';
	}
	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';

	return style;
})

watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)

const memberStore = useMemberStore()

// #ifdef H5
const { query } = urlDeconstruction(location.href)
if (query.code && isWeixinBrowser()) {
	setTimeout(() => {
		wechatSync({ code: query.code }).then(res => {
			memberStore.getMemberInfo()
		})
	}, 1500)
}
// #endif

const info = computed(() => {
	// 装修模式
	if (diyStore.mode == 'decorate') {
		return {
			headimg: '',
			nickname: '昵称',
			member_level_name: '普通会员',
			balance: 0,
			point: 0,
			money: 0,
			mobile: '155****0549',
			member_no: 'NIU0000021'
		}
	} else {
		if (getToken()) {
			if (diyComponent.value.isShowAccount) {
				getStatisticsRebateEmployeeFn()

			}
		}

		return memberStore.info;
	}
})

const money = computed(() => {
	if (info.value) {

		// let m = parseFloat(info.value.balance) + parseFloat(info.value.money)
		// return moneyFormat(m.toString());
		let m = diyGoods.fen2yuan(balance.value)
		return moneyFormat(m.toString());
	} else {
		return 0;
	}
})
//获取当前登录的租户信息
const tenantId = computed(() => {
	return memberStore.tenantId;
})
const tenantName = computed(() => {
	return memberStore.tenant;

})


onShow(() => {

})
onMounted(() => {


})
const potsStr = computed(() => {
	let list = []
	if (uni.getStorageSync('wap_member_posts')) {
		list = uni.getStorageSync('wap_member_posts').map((item: any) => item.name)
	} else {
		list = []
	}
	let str = list.join('，')
	return str
})

const toLogin = () => {
	let normalLogin = !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile; // 未开启普通登录
	let authRegisterLogin = !configStore.login.is_auth_register; // 自动注册登录

	// #ifdef H5
	if (isWeixinBrowser()) {
		// 微信浏览器
		if (normalLogin && authRegisterLogin) {
			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
		} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
			useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
		} else if (normalLogin && configStore.login.is_auth_register) {
			// 判断是否开启第三方自动注册登录
			useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
		}
	} else {
		// 普通浏览器
		if (normalLogin) {
			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
		} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
			useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
		}
	}
	// #endif

	// #ifdef MP
	if (normalLogin && authRegisterLogin) {
		uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
	} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
		useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
	} else if (normalLogin && configStore.login.is_auth_register) {
		// 判断是否开启第三方自动注册登录
		useLogin().getAuthCode()
	}
	// #endif

	// #ifdef APP-PLUS

	if (normalLogin && authRegisterLogin) {
		uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
	} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {

		useLogin().setLoginBack({ url: '/addon/shop/pages/member/index' })
	}
	// #endif

}

const infoFillRef: any = ref(false)
const clickAvatar = () => {
	// #ifdef MP-WEIXIN
	// infoFillRef.value.show = true
	// #endif

	// #ifdef H5

	redirect({ url: '/app/pages/member/personal' })

	// if (isWeixinBrowser()) {
	// 	useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
	// } else {
	// 	redirect({ url: '/app/pages/member/personal' })
	// }
	// #endif
}


const balance = ref(0)
const serviceNum = ref(0)
const performancePrice = ref(0)
const otherPrice = ref(0)
const storeUser = ref(0)
let wap_member_id = uni.getStorageSync('wap_member_id');

const getStatisticsRebateEmployeeFn = async () => {
	try {
		let params = {
			employeeId: wap_member_id, //员工名称
			query: 0,
		}
		const res = await getStatisticsRebateEmployee(params)
		let data = res?.data?.data[0]
		balance.value = data.balance || 0
		serviceNum.value = data.serviceNum || 0
		performancePrice.value = data.performancePrice || 0
		otherPrice.value = data.otherPrice || 0
		storeUser.value = data.storeUser || 0
	} catch (e) {
		balance.value = 0
	}
}

//强制绑定手机号
const bindMobileRef: any = ref(null)
const bindMobileFn = () => {
	bindMobileRef.value.open()
}

let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	if (props.global.topStatusBar.isShow == false) {
		style += 'height:' + menuButtonInfo.height + 'px;';
		style += 'padding-top:' + menuButtonInfo.top + 'px;';
	}
	// #endif
	return style;
})
</script>

<style lang="scss" scoped></style>
